<template>
  <a-modal
    :visible="visible"
    :keyboard="true"
    :cancel-text="'取消'"
    :ok-text="'确认'"
    :centered="true"
    :destroy-on-close="true"
    @ok="confirmDeleteNode"
    @cancel="cancelDelete"
  >
    <div class="content">
      <div v-if="!isClear" class="title">
        <a-icon-font class="icon" type="iconweiwanpeizhi"></a-icon-font
        ><b style="width: 100%;"
          >确认删除节点:
          <span class="delete-node-name">{{ nodesName }}</span> ?</b
        >
      </div>
      <div v-else>
        <div class="title">
          <a-icon-font class="icon" type="iconweiwanpeizhi"></a-icon-font
          ><b>您正在进行清空 pipeline 所有节点操作 !</b>
        </div>
      </div>
      <a-checkbox class="checkbox" :checked="noPrompt" @change="onChange">
        不再提醒 ( 删除节点/清空pipeline ) !后续可在系统设置中开启
      </a-checkbox>
    </div>
    <!-- <p v-if="!isClear">
      确认删除节点: <span class="delete-node-name">{{ nodesName }}</span> ?
    </p>
    <p v-else>
      <span> 您正在进行清空 pipeline 所有节点操作 !</span>
    </p> 
    <a-checkbox :checked="noPrompt" @change="onChange">
      不再提醒 ( 删除节点/清空pipeline ) !后续可在系统设置中开启
    </a-checkbox>-->
  </a-modal>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
import { updateNodeDeletionSecondaryConfirmation } from '@/api/user'
import DataViewStore from '@/store/modules/dataview'

@Component({
  components: {},
})
export default class NodeDeleteConfirm extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  @Prop({ type: Array, default: () => [] }) nodes!: any[]
  @Prop({ type: Boolean, default: false }) isClear!: boolean
  public noPrompt: boolean = false // 确认删除节点弹窗 不再提醒

  public get pipelineDeleteConfirm() {
    return DataViewStore.pipelineDeleteConfirm
  }

  @Watch('pipelineDeleteConfirm')
  private changeNoPrompt(value: any) {
    this.noPrompt = !value
  }

  public get nodesName() {
    const nodeName =
      this.nodes.length > 0
        ? this.nodes.map((node: any) => node.name).toString()
        : ''
    return nodeName
  }

  public async confirmDeleteNode() {
    // 仅在弹窗弹出且更改为不需要弹窗确认时才发送修改请求
    if (this.visible && this.noPrompt) {
      await updateNodeDeletionSecondaryConfirmation({
        data: {
          nodeDeletionSecondaryConfirmation: 0,
        },
      })
      await DataViewStore.getPipelineDeleteConfirm()
    }
    this.$emit('confirm')
  }

  public onChange($event: any) {
    this.noPrompt = $event.target.checked
  }

  public cancelDelete() {
    this.$emit('cancel')
  }
}
</script>

<style scoped lang="less">
.delete-node-name {
  font-weight: 600;
}

.content {
  padding: 32px 32px 0;
  width: 100%;

  .title {
    align-items: center;
    display: flex;
    font-size: 16px;
    margin-bottom: 20px;
    width: 100%;

    .icon {
      font-size: 24px;
      margin-right: 14px;
    }
  }

  .checkbox {
    margin-left: 30px;
  }
}

/deep/.ant-modal-footer {
  border-top: 0;
}
</style>
